<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <p v-bind:id="id1">{{id1}}</p>
        <!-- 绑定自定义属性 -->
        <p v-bind:abc="id1">自定义属性</p>
        <img v-bind:src="imgurl" alt="">
        <p v-bind:class="on">动态class</p>
        <!-- 直接赋值属性集合 -->
        <p v-bind="attrsObj">属性集合</p>
        <!-- 简写语法: -->
        <p :class='on'>v-bind 简写</p>
    </div>
</body>

</html>
<script>
    // v-bind 内置指令(重要!!!)
    // 解决标签属性上需要绑定动态属性(属性的值为变量数据),这时候使用v-bind
    // 语法: v-bind:属性名='数据变量'
    // 简写: :属性名 = '属性变量' 常用
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                id1: 100,
                imgurl: 'https://img1.baidu.com/it/u=3699210668,3094210930&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=797',
                on: 'active',
                attrsObj: {
                    id1: 100,
                    name: 'p1'
                }
            }
        }
    }).mount('#app')


</script>